
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      #sexyline { 
          margin: 25px 0;
          height: 1px;
          background: #eeeee;
          background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, grey));
      }​
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <!--Custom JS scripts-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <script type="text/javascript" src="js/bday-picker.js"></script>
    <script type="text/javascript" src="js/countryCity.js"></script>
    <script type="text/javascript" src="js/Ambit-Type.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function () {
          	$('#picker1').birthdaypicker({
          		minAge: 13,
          		dateFormat: "littleEndian"
          	});
    function validatePass(p1, p2) {
              if (p1.value != p2.value || p1.value == '' || p2.value == '') {
                  p2.setCustomValidity('Password incorrect');
              } else {
                  p2.setCustomValidity('');
              }
          }
    </script>
   

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">drop.in</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit" style="padding: 10px 10px 10px 10px;">
        <div style="text-align: center;">
        <h2>Event Creation Panel</h2>
        </div>
      </div>
      <div class="row">
        <div class="span4 offset3">
        <form class="form-horizontal">
          <fieldset>
            <legend>Enter event details:</legend>
            <div class="control-group" style="padding-right: 80px;;">
              <label class="control-label" for="title">Event Title:</label>
              <div class="controls">
                <input type="text" class="input-xlarge" id="title" name="title" required pattern="^[a-z][a-z0-9_]*$" size="32" placeholder="The title of the event">
                <p class="help-block"> </p>
              </div>
              <label class="control-label" for="eventdate">Event Date:</label>
              <div class="controls" id="eventdate">
                <select name="day" id="day" class="span1">
                  <option disabled="" selected="">Day</option>
                  <option value="01">1</option>
                  <option value="02">2</option>
                  <option value="03">3</option>
                  <option value="04">4</option>
                  <option value="05">5</option>
                  <option value="06">6</option>
                  <option value="07">7</option>
                  <option value="08">8</option>
                  <option value="09">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                  <option value="17">17</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                  <option value="21">21</option>
                  <option value="22">22</option>
                  <option value="23">23</option>
                  <option value="24">24</option>
                  <option value="25">25</option>
                  <option value="26">26</option>
                  <option value="27">27</option>
                  <option value="28">28</option>
                  <option value="29">29</option>
                  <option value="30">30</option>
                  <option value="31">31</option>
                </select>
                <select name="month" id="month" class="span2">
                  <option disabled="" selected="">Month</option>
                  <option value="01">January</option>
                  <option value="02">February</option>
                  <option value="03">March</option>
                  <option value="04">April</option>
                  <option value="05">May</option>
                  <option value="06">June</option>
                  <option value="07">July</option>
                  <option value="08">August</option>
                  <option value="09">September</option>
                  <option value="10">October</option>
                  <option value="11">November</option>
                  <option value="12">December</option>
                </select>
                <select name="year" id="year" class="span1">
                  <option value="year" disabled="" selected="">Year</option>
                  <option value="2012">2012</option>
                  <option value="2013">2013</option>
                  <option value="2014">2014</option>
                  <option value="2015">2015</option>
                </select>
                <p class="help-block"> </p>
              </div>
              <label class="control-label" for="starttime">Start Time:</label>
              <div class="controls" id="starttime">
                <select name="starttime" id="starttime" class="span2">
                  <option disabled="" selected="">Start time</option>
                  		<option value="00:00">00:00</option>
                        <option value="00:30">00:30</option>
                        <option value="01:00">01:00</option>
                        <option value="01:30">01:30</option>
                        <option value="02:00">02:00</option>
                        <option value="02:30">02:30</option>
                        <option value="03:00">03:00</option>
                        <option value="03:30">03:30</option>
                        <option value="04:00">04:00</option>
                        <option value="04:30">04:30</option>
                        <option value="05:00">05:00</option>
                        <option value="05:30">05:30</option>
                        <option value="06:00">06:00</option>
                        <option value="06:30">06:30</option>
                        <option value="07:00">07:00</option>
                        <option value="07:30">07:30</option>
                        <option value="08:00">08:00</option>
                        <option value="08:30">08:30</option>
                        <option value="09:00">09:00</option>
                        <option value="09:30">09:30</option>
                        <option value="10:00">10:00</option>
                        <option value="10:30">10:30</option>
                        <option value="11:00">11:00</option>
                        <option value="11:30">11:30</option>
                        <option value="12:00">12:00</option>
                        <option value="12:30">12:30</option>
                        <option value="13:00">13:00</option>
                        <option value="13:30">13:30</option>
                        <option value="14:00">14:00</option>
                        <option value="14:30">14:30</option>
                        <option value="15:00">15:00</option>
                        <option value="15:30">15:30</option>
                        <option value="16:00">16:00</option>
                        <option value="16:30">16:30</option>
                        <option value="17:00">17:00</option>
                        <option value="17:30">17:30</option>
                        <option value="18:00">18:00</option>
                        <option value="18:30">18:30</option>
                        <option value="19:00">19:00</option>
                        <option value="19:30">19:30</option>
                        <option value="20:00">20:00</option>
                        <option value="20:30">20:30</option>
                        <option value="21:00">21:00</option>
                        <option value="21:30">21:30</option>
                        <option value="22:00">22:00</option>
                        <option value="22:30">22:30</option>
                        <option value="23:00">23:00</option>
                        <option value="23:30">23:30</option> 
                  </select>
                <p class="help-block"> </p>
              </div>
              <label class="control-label" for="endtime">End Time:</label>
              <div class="controls" id="endtime">
                <select name="endtime" id="endtime" class="span2">
                  <option disabled="" selected="">End time</option>
                  		<option value="00:00">00:00</option>
                        <option value="00:30">00:30</option>
                        <option value="01:00">01:00</option>
                        <option value="01:30">01:30</option>
                        <option value="02:00">02:00</option>
                        <option value="02:30">02:30</option>
                        <option value="03:00">03:00</option>
                        <option value="03:30">03:30</option>
                        <option value="04:00">04:00</option>
                        <option value="04:30">04:30</option>
                        <option value="05:00">05:00</option>
                        <option value="05:30">05:30</option>
                        <option value="06:00">06:00</option>
                        <option value="06:30">06:30</option>
                        <option value="07:00">07:00</option>
                        <option value="07:30">07:30</option>
                        <option value="08:00">08:00</option>
                        <option value="08:30">08:30</option>
                        <option value="09:00">09:00</option>
                        <option value="09:30">09:30</option>
                        <option value="10:00">10:00</option>
                        <option value="10:30">10:30</option>
                        <option value="11:00">11:00</option>
                        <option value="11:30">11:30</option>
                        <option value="12:00">12:00</option>
                        <option value="12:30">12:30</option>
                        <option value="13:00">13:00</option>
                        <option value="13:30">13:30</option>
                        <option value="14:00">14:00</option>
                        <option value="14:30">14:30</option>
                        <option value="15:00">15:00</option>
                        <option value="15:30">15:30</option>
                        <option value="16:00">16:00</option>
                        <option value="16:30">16:30</option>
                        <option value="17:00">17:00</option>
                        <option value="17:30">17:30</option>
                        <option value="18:00">18:00</option>
                        <option value="18:30">18:30</option>
                        <option value="19:00">19:00</option>
                        <option value="19:30">19:30</option>
                        <option value="20:00">20:00</option>
                        <option value="20:30">20:30</option>
                        <option value="21:00">21:00</option>
                        <option value="21:30">21:30</option>
                        <option value="22:00">22:00</option>
                        <option value="22:30">22:30</option>
                        <option value="23:00">23:00</option>
                        <option value="23:30">23:30</option> 
                  </select>
                  <p class="help-block"></p>
              </div>
              <label class="control-label" for="venue">Venue:</label>
              <div class="controls">
                <input type="text" class="input-xlarge" id="venue" name="venue" required pattern="^[a-z][a-z0-9_ ]*$" size="32" placeholder="The name of the venue">
                <p class="help-block"> </p>
              </div>
              <label class="control-label" for="venue">Venue Address:</label>
              <div class="controls">
                <input type="text" class="input-xlarge" id="venueaddress" name="venueaddress" required pattern="^[a-z][a-z0-9_ ]*$" size="32" placeholder="The address of the venue">
                <p class="help-block"> </p>
              </div>
                <label class="control-label" for="country">Country:</label>
                <div class="controls">
                  <select name="country" id="country" onchange="setCities();">
                    <option disabled="" selected="">Select A Country</option>
                    <option value="Italy">Italy</option>
                    <option value="Mexico">Mexico</option>
                    <option value="United States">United States</option>
                  </select>
                  <p class="help-block"> </p>
                </div>
                <label class="control-label" for="city">City:</label>
                <div class="controls">
                  <select name="city" id="city" onchange="setCities();">
                    <option disabled="" selected="">Please Select A Country</option>
                    <option value="Italy">Italy</option>
                    <option value="Mexico">Mexico</option>
                    <option value="United States">United States</option>
                  </select>
                  <p class="help-block"> </p>
                </div>
              <label class="control-label" for="ambit">Ambit:</label>
              <div class="controls">
                <select name="ambit" id="ambit" class="span2" onchange="setType();">
                  <option disabled="" selected="">Ambit</option>
                  <option value="Sports">Sports</option>
                  <option value="Traveling">Traveling</option>
                  <option value="Entertainment">Entertainment</option>
                </select>
              <p class="help-block"></p>
              </div>
              <label class="control-label" for="type">Type:</label>
              <div class="controls">
                <select name="type" id="type" class="span2">
                  <option disabled="" selected="">Please select an ambit first</option>
                </select>
              <p class="help-block"></p>
              </div>
              <label class="control-label" for="venue">Number of participants:</label>
              <div class="controls">
                <input type="text" class="input-xlarge" id="partnumber" name="partnumber" required pattern="[0-9]*" size="32" placeholder="The total number of participants">
                <p class="help-block"> </p>
              </div>
              <label class="control-label" for="venue">Number of guest spots:</label>
              <div class="controls">
                <input type="text" class="input-xlarge" id="partnumber" name="partnumber" required pattern="[0-9]*" size="32" placeholder="The number of open spots">
                <p class="help-block"> </p>
              </div>
              <label class="control-label" for="venue">Event description:</label>
              <div class="controls">
               <textarea type="text" name="description" id="description" cols="80" rows="5" required pattern="^[a-z][a-z0-9_ ]*$"></textarea>
                <p class="help-block"> </p>
              </div>
            </div>
            <div class="form-actions">
              <button type="submit" class="btn btn-primary">Create Event!</button>
            </div>
          </fieldset>
        </form>
   		
      <footer>
        <p style="text-align: center;">&copy; PiP 2012</p>
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

  </body>
</html>
